<template>
    <div style="flex: 1;line-height: 60px;">
        <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse"></span>
        <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
            <el-breadcrumb-item :to="'/home/usermannage'">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="display: inline-block;
				float: right;
		  		margin-top: 10px;
		  		margin-right: 20px;">
            <el-dropdown style="display: flex;">
                <el-image style="width: 40px; height: 40px; border:none;cursor: pointer; border-radius: 50%;"
                          :src="`/gongyi/common/download?name=${avatar}`">
                    <div slot="error" class="image-slot" style="margin-bottom: 0px;">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <el-dropdown-menu slot="dropdown" style="width: 170px;height: 132px;">
                    <el-dropdown-item style="height: 33%;line-height: 44px;">
                        <el-link icon="el-icon-ali-xiugaimima" :underline="false" @click="handlePassword">修改密码</el-link>
                    </el-dropdown-item>
                    <el-dropdown-item style="height: 33%;vertical-align: middle;line-height: 44px;">
                        <el-link :underline="false" icon="el-icon-ali-gerenxinxi" @click="handlePerson">修改个人信息</el-link>
                    </el-dropdown-item>
                    <el-dropdown-item style="height: 33%;line-height: 44px;">
                        <el-link :underline="false" icon="el-icon-ali-secede" @click="$router.push('/')"> 退出</el-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>


        <el-dialog title="用户信息" :visible.sync="personVisible">
            <el-form label-width="80px" size="small"
                     :model="form"
                     :rules="infoRules"
                     ref="userForm"
                     label-position="left">
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            action="/gongyi/common/upload"
                            :on-success="handleAvatarSuccess"
                            :before-remove="beforeRemove"
                            :on-remove="handleRemove"
                            :limit="1"
                            :on-exceed="handleExceed"
                            :show-file-list="true"
                    >
                        <!-- :on-success="handleAvatarSuccess" -->
                        <img v-if="avatar" :src="`/gongyi/common/download?name=${avatar}`" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="form.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="danger" native-type="submit" @click.native.prevent="update">修 改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="修改密码" :visible.sync="passwordVisible">
            <el-form label-width="100px" size="small"
                     :model="form"
                     ref="pass"
                     :rules="rules"
                     label-position="left">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="form.password" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {modify, deleteFile} from '@/api/administrator.js'

    export default {
        name: 'Header',
        data() {
            return {
                personVisible: false,
                form: {},
                passwordVisible: false,
                admin: {},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, message: '请再次输入密码', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ]
                },
                infoRules: {
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 8 个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: 'blur',
                        },
                    ],
                },
            }
        },
        props: {
            collapseBtnClass: String,
            user: Object
        },
        created() {
            this.admin = JSON.parse(localStorage.getItem("user"))
            this.form = this.admin
            console.log(this.form)
        },
        methods: {
            collapse() {
                // this.$parent.$parent.$parent.$parent.collapse()  // 通过4个 $parent 找到父组件，从而调用其折叠方法
                this.$emit("asideCollapse")
            },
            handlePerson() {
                this.personVisible = true
            },
            handlePassword() {
                this.passwordVisible = true
            },
            handleAvatarSuccess(response, file, fileList) {
                this.admin.avatar = response.name
                this.$message.success("上传成功！")
                this.imageUrl = `/gongyi/common/download?name=${response.name}`
            },

            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            handleRemove(file, fileList) {
                this.imageUrl = ''
                deleteFile(file.response.name).then(res => {
                    if (res.data.status == 'success') {
                        this.$message.success("移除成功！")
                        this.url = ""
                    } else if (res.data.status == 'error') {
                        this.$message.error("移除失败！")
                    }
                }).catch(err => {
                    this.$message.error("发生错误了！" + err)
                })
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            update() {
                this.form.id = this.admin.id
                this.$refs.userForm.validate(async (valid) => {
                    if (valid) {
                        await modify(this.admin).then(res => {
                            if (res.data.code == '0') {
                                this.$message.error("修改失败")
                            } else {
                                this.$message.success("修改成功！")
                                localStorage.setItem("user", JSON.stringify(res.data.administrator))
                                this.personVisible = false
                            }
                        }).catch(error => {
                            this.$message.error("出现错误！" + error)
                        })
                    }
                })
            },
            save() {
                this.$refs.pass.validate(async (valid) => {
                    if (valid) {
                        if (this.form.newPassword !== this.form.confirmPassword) {
                            this.$message.error("两次输入的密码不一致！")
                            return false
                        } else if (this.form.password != this.admin.password) {
                            this.$message.error("原密码输入错误！")
                            return false
                        } else {
                            this.admin.password = this.form.newPassword
                            await modify(this.admin).then(res => {
                                if (res.data.code == '0') {
                                    this.$message.error("修改失败")
                                } else {
                                    this.$message.success("修改成功！请重新登录")
                                    this.$router.push("/")
                                    this.personVisible = false
                                }
                            }).catch(error => {
                                this.$message.error("出现错误！" + error)
                            })
                        }
                    }
                })
            },
        },
        computed: {
            currentPathName() {
                return this.$store.state.currentPathName　　//需要监听的数据
            },
            avatar() {
                console.log(this.admin.avatar)
                return this.admin.avatar
            },
            username() {
                return this.admin.username
            }
        }
    }
</script>

<style>
    .avatar-uploader {
        padding-bottom: 10px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 138px;
        height: 138px;
        line-height: 138px;
        text-align: center;
    }

    .avatar {
        width: 138px;
        height: 138px;
        display: block;
    }
</style>